<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./assets/tailwind.css" rel="stylesheet">
    <title>证书下载</title>
</head>

<body class="text-3xl bg-red-50 flex justify-center w-full
items-center
">

    <div class="loadingWrap" id="loadingWrap" style="">
        <div>
            <div class="lds-roller">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div>
                <h2>加载中</h2>
            </div>
        </div>
    </div>

    <div style="" class="bg-white shadow-md 
        rounded-lg mb-4
        mt-8
        md:w-1/3
        pt-4
        px-4
        pb-4
        grid
        justify-items-center
        " id="main">
        <div id="banner" class="">
            <img src="./202203证书/banner.png" alt="">
        </div>
        <form class="w-full max-w-sm mt-10">
            <div class="mb-6 md:flex md:items-center">
                <div class="md:w-1/3">
                    <label class="block pr-4 mb-1 font-bold text-gray-500 md:text-right md:mb-0" for="inline-full-name">
                        分类:
                    </label>
                </div>
                <div class="md:w-2/3">
                    <!--<input class="w-full px-4 py-2 leading-tight text-gray-700 bg-gray-200 border-2 border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="Jane Doe">-->

                    <select id="catlog" class="form-select form-select-lg
                                block
                                w-full px-4 py-4
                                text-lg
                                text-gray-700
                                bg-white bg-clip-padding bg-no-repeat
                                border border-solid border-gray-300
                                rounded-md
                                hover:border-gray-500
                                m-0
                                shadow
                                focus:text-gray-700 focus:bg-white
                             focus:border-purple-500
                                " aria-label="Default select example">
                        <option value="科幻画">科幻绘画</option>
                        <option value="科学童话">科学童话</option>
                        <option value="科幻小说">科幻小说</option>
                    </select>
                </div>
            </div>
            <div class="mb-6 md:flex md:items-center">
                <div class="md:w-1/3">
                    <label class="block pr-4 mb-1 font-bold text-gray-500 md:text-right md:mb-0" for="inline-password">
                        身份证:
                    </label>
                </div>
                <div class="md:w-2/3">
                    <input id="idnumber" class="w-full px-4 py-2 
                        leading-tight
                         text-gray-700
                          border-2
                           border-gray-200 
                           rounded appearance-none 
                           focus:outline-none
                           text-lg
                            focus:bg-white
                             focus:border-purple-500" id="inline-password" type="text">
                </div>
            </div>
            <div class="md:flex md:items-center">
                <div class="md:w-1/3"></div>
                <div class="md:w-2/3">
                    <button
                        class="px-4 py-2 font-bold text-white bg-purple-500 rounded shadow hover:bg-purple-400 focus:shadow-outline focus:outline-none"
                        type="button" id="search_user">
                        查询
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div id="show_info" class="show_info" style="display: none;">
        <table border="1">
            <tbody>
                <tr>
                    <td colspan="2" class="title">第四届青少年科普科幻创作活动</td>
                </tr>
                <tr>
                    <td>学生姓名</td>
                    <td id="name"></td>
                </tr>
                <tr>
                    <td>就读学校</td>
                    <td id="school"></td>
                </tr>
                <tr>
                    <td>科目</td>
                    <td id="subject"></td>
                </tr>
                <tr>
                    <td>作品名</td>
                    <td id="works_name"></td>
                </tr>
                <!-- <tr>
                        <td>分数</td>
                        <td id="score"></td>
                        </tr> -->
                <tr>
                    <td>荣获奖项</td>
                    <td style="color: #ff9933; font-weight: bolder;" id="level"></td>
                </tr>
            </tbody>
        </table>
        <div class="infoAndDate mt-6" style="text-align: center; color: #ccc;">
            <p class="text-sm"> 北京市海淀区中小学信息科技教育协会
            </p>
            <p class="text-sm"> 2022年4月5日 </p>
        </div>

    </div>
    <script type="module" src="./202203证书/app.ts"></script>
</body>

</html>
